<template>
  <div>
  <div style="margin-top: 15px; width: 450px">
 <el-button slot="prepend" type="primary" plain icon="el-icon-plus" @click="dialogFormVisibleadd = true">新增</el-button>
</div>
    <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="name" label="菜单名称" width="180" ></el-table-column>
        <el-table-column prop="linkurl" label="链接" width="180"> </el-table-column>
        <el-table-column prop="path" label="权限点代码" width="180"> </el-table-column>
        <el-table-column prop="level" label="排序号" width="180"> </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
          size="mini" type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50]"
      :page-size="num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
   <!--编辑或者添加的模态框-->
   <el-dialog title="编辑员工信息" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-form :model="menu" ref="menu" label-width="100px" class="demo-ruleForm">
  <el-form-item label="序号" prop="id">
    <el-input readonly v-model="menu.id"></el-input>
  </el-form-item>
  <el-form-item label="菜单名称" prop="name">
    <el-input v-model="menu.name"></el-input>
  </el-form-item>
  <el-form-item label="链接" prop="linkurl">
    <el-input v-model="menu.linkurl"></el-input>
  </el-form-item>
  <el-form-item label="权限点代码" prop="path">
    <el-input v-model="menu.path"></el-input>
  </el-form-item>
  <el-form-item label="排序号" prop="level">
    <el-input v-model="menu.level"></el-input>
  </el-form-item>
</el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
    <el-button type="primary" @click="submitForm('menu')">保存</el-button>
</div>
    </el-dialog>

    <el-dialog title="温馨提示" :visible.sync="visible" width="60%">
      <span>确认要删除{{menu.name}}嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
  
  <script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.menu = Object.assign({}, row);
    },
    handleDelete(index, row) {
      this.visible = true;
      this.menu.id = row.id;
      this.menu.name = row.name;
    },
    info() {
      this.axios
        .get("/rear/Menu/tkpagemenus", {
          params: {
            page: this.page,
            num: this.num,
          },
        })
        .then((req) => {
          this.tableData = req.data.list;
          this.total = req.data.total;
        });
    },

    handleSizeChange(val) {
      this.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.info();
    },
    onSubmit() {
     this.info();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在修改中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)",
          });

          this.axios
            .post("/rear/Menu/tkupdmeu", this.menu)
            .then((req) => {
              if (req.data > 0) {
                loading.close();
                this.dialogVisible = false;
                this.info();
              } else {
                loading.close();
              }
            })
            .catch(() => {
              loading.close();
            });
        } else {
          console.log("信息未输入完成");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    del() {
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/Menu/tkdelmeu", { params: this.menu })
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.visible = false;
            this.info();
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
  data() {
    return {
      visible: false,
      dialogVisible: false,
      page: 1,
      num: 10,
      total: 10,
      tableData: [],
      menu: {
        id:null,
        name: "",
        linkurl: null,
        path: null,
        level: null,
      },
    };
  },
  created() {
    this.info();
  },
};
</script>